<template>
  <div class="login-container">
    <div class="form-wrap">
      <div class="form-title">修改密码</div>
      <div class="form-item-input">
        <input type="password" v-model="ruleForm.oldPassword" placeholder="请输入原密码">
      </div>
      <div class="form-item-input">
        <input type="password" v-model="ruleForm.newPassword" placeholder="请输入新密码">
      </div>
      <div class="form-item-input">
        <input type="password" v-model="ruleForm.checkPassword" placeholder="请再次输入新密码">
      </div>

      <div class="submit-btn" @click="onClickSubmit">
        修改
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import {ElMessage, ElNotification} from 'element-plus'
import $api from '@/api'
import {useRoute, useRouter} from "vue-router";

const route = useRoute()
const router = useRouter()
const ruleForm = reactive({
  checkPassword: '',
  oldPassword: '',
  newPassword: ''
})
/**
 * 点击修改
 */
var loading = false
const onClickSubmit = () => {
  if (ruleForm.oldPassword.length === 0) {
    ElMessage({
      message: '请输入原密码',
      type: 'warning',
    })
  } else if (ruleForm.newPassword.length === 0) {
    ElMessage({
      message: '请输入新密码',
      type: 'warning',
    })
  } else if (ruleForm.checkPassword !== ruleForm.newPassword) {
    ElMessage({
      message: '两次密码不一致',
      type: 'warning',
    })
  } else {
    if (loading) {
      return
    }
    loading = true
    $api.userApi.changePassword(ruleForm).then(res => {
      loading = false
      ElNotification({
        title: '成功',
        message: '修改成功！',
        type: 'success',
      })
      ruleForm.checkPassword = ''
      ruleForm.oldPassword = ''
      ruleForm.newPassword = ''
    }).catch(() => {
      loading = false
    })
  }

}
</script>

<style scoped lang="scss">
.login-container {
  width: 100%;
  background-color: #e6ebef;
  padding-top: 120px;
  padding-bottom: 120px;

  > .form-wrap {
    margin: 0 auto;
    background-color: #fff;
    padding: 30px 50px 40px;
    box-sizing: border-box;
    width: 540px;
  }
}

.form-title {
  color: #575757;
  font-size: 20px;
  display: flex;
  align-items: center;

  &::before {
    content: '';
    display: block;
    width: 4px;
    height: 22px;
    background-color: #003a56;
    margin-right: 20px;
  }
}

.form-item-input {
  color: #575757;
  border: 1px solid #c2c4cd;
  width: 100%;
  height: 60px;
  margin: 30px 0;
  border-radius: 4px;

  > input {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 16px;
  }
}

.submit-btn {
  background-color: #3a3a3a;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  transition: all 0.4s ease;
  cursor: pointer;

  &:hover {
    opacity: 0.7;
  }
}
</style>